{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
~}}

<PageHeader as |p|>
  <p.top>
    <Page::Breadcrumbs @breadcrumbs={{@breadcrumbs}} />
  </p.top>
  <p.levelLeft>
    <h1 class="title is-3 has-bottom-margin-2" data-test-credentials-header>
      {{if this.credentials "Credentials" "Generate credentials"}}
    </h1>
  </p.levelLeft>
</PageHeader>

{{#if this.credentials}}
  <div class="box is-sideless is-fullwidth is-marginless has-bottom-padding-l" data-test-credentials-details>
    <Hds::Alert @type="inline" @color="warning" as |A|>
      <A.Title data-test-k8-alert-title>Warning</A.Title>
      <A.Description data-test-k8-alert-message>You won't be able to access these credentials later, so please copy them now.</A.Description>
    </Hds::Alert>
    <InfoTableRow @label="Service account token">
      <MaskedInput
        @value={{this.credentials.service_account_token}}
        @name="Service Account Token"
        @displayOnly={{true}}
        @allowCopy={{true}}
      />
    </InfoTableRow>
    <InfoTableRow
      @label="Namespace"
      @value={{this.credentials.service_account_namespace}}
      @addCopyButton={{true}}
      @alwaysRender={{true}}
    />
    <InfoTableRow
      @label="Service account name"
      @value={{this.credentials.service_account_name}}
      @addCopyButton={{true}}
      @alwaysRender={{true}}
    />
    <InfoTableRow @label="Lease expiry" @value={{date-format this.leaseExpiry "MMMM do yyyy, h:mm:ss a"}} />
    <InfoTableRow @label="lease_id" @value={{this.credentials.lease_id}} />
    <InfoTableRow />
  </div>

  <div class="has-top-margin-l">
    <Hds::Button @text="Done" data-test-generate-credentials-done {{on "click" this.cancel}} />
  </div>
{{else}}
  <div data-test-generate-credentials>
    <form {{on "submit" (perform this.fetchCredentials)}}>
      <div class="field box is-sideless is-fullwidth is-marginless">
        <p>This will generate credentials using the role <span class="is-font-mono">{{@roleName}}</span>.</p>

        {{#if this.error}}
          <MessageError class="has-top-margin-l" @errorMessage={{this.error}} />
        {{/if}}

        <label for="k8s-namespace" class="is-label has-top-margin-l">Kubernetes namespace</label>
        <div class="has-text-grey is-size-8 has-bottom-margin-xs">
          The namespace in which to generate the credentials.
        </div>
        <Input
          @type="text"
          @value={{this.kubernetesNamespace}}
          class="input"
          id="k8s-namespace"
          {{on "input" this.setKubernetesNamespace}}
          data-test-kubernetes-namespace
        />

        <div class="has-top-margin-l has-bottom-margin-l">
          <Toggle
            @checked={{this.clusterRoleBinding}}
            @onChange={{(toggle-action "clusterRoleBinding" this)}}
            data-test-kubernetes-clusterRoleBinding
          >
            <h3 class="title is-7 is-marginless">ClusterRoleBinding</h3>
            <div class="description has-text-grey">
              <span>
                Generate a ClusterRoleBinding to grant permissions across the whole cluster instead of within a namespace.
                This requires the Vault role to have kubernetes_role_type set to ClusterRole.
              </span>
            </div>
          </Toggle>
        </div>

        <TtlPicker
          class="has-top-margin-l has-bottom-margin-m"
          @initialEnabled={{false}}
          @label="Time-to-Live (TTL)"
          @onChange={{this.updateTtl}}
          @helperTextDisabled="The TTL of the generated Kubernetes service account token. Defaults to the role's default TTL, or the default system TTL."
        />
      </div>
      <div class="has-top-margin-l">
        <Hds::Button
          @text="Generate credentials"
          @icon={{if this.fetchCredentials.isRunning "loading"}}
          type="submit"
          disabled={{this.fetchCredentials.isRunning}}
          data-test-generate-credentials-button
        />
        <Hds::Button
          @text="Back"
          @color="secondary"
          class="has-left-margin-xs"
          disabled={{this.fetchCredentials.isRunning}}
          {{on "click" this.cancel}}
          data-test-generate-credentials-back
        />
      </div>
    </form>
  </div>
{{/if}}